<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div id="app">
    <div id="content" style="max-width:600px;margin:50px auto">
      商品名称
      <input type="text" v-model="item.name">
      商品价格
      <input type="number" v-model="item.price">
      购买数量
      <input type="number" v-model="item.num">
      <button @click="addCart">增加到购物车</button>
      <table class="table table-bordered table-hover">
        <tr>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>购买数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in items" :key="index">
          <td>
            <input @change="itemCheckedChange" type="checkbox" v-model="item.checked">
            {{item.name}}
          </td>
          <td>{{item.price}}</td>
          <td>
            <button @click="addNum(index)" class="btn btn-xs">+</button>
            {{item.num}}
            <button @click="reduceNum(index)" class="btn btn-xs">-</button>
          </td>
          <td>
            {{(item.num*item.price).toFixed(2)}}
          </td>
          <td>
            <button 
              @click="delItem(index)"
              class="btn btn-danger btn-sm">删除</button>
          </td>
        </tr>
        <tr>
          <td>合计</td>
          <td colspan="4">
            全选：<input type="checkbox" @change="allCheckedChange" v-model="allChecked">
            总价格：{{total}}

          </td>
        </tr>
      </table>

      {{ items }}
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el: '#app',
      data: {
        item:{
          name:'',
          price:0,
          num:0
        },
        items: [
          {
            name: '商品1',
            price: 19.9,
            num: 1,
            checked: true
          },
          {
            name: '商品2',
            price: 29.9,
            num: 2,
            checked: true
          },
          {
            name: '商品3',
            price: 39.9,
            num: 1,
            checked: true
          },
          {
            name: '商品4',
            price: 99.9,
            num: 1,
            checked: true
          }
        ],
        total: 0,
        allChecked: true // 全选状态
      },
      methods: {
        addCart(){
          this.items.push({
            ...this.item,
            checked: true
          })
          this.calcTotal();
        },
        delItem(index){
          if(confirm('确认删除吗?')){
            this.items.splice(index, 1);
            this.calcTotal();
          }
        },
        allCheckedChange(){
          // 点击改变全选状态
          console.log(this.allChecked);
          this.items.forEach(item=>{
            item.checked = this.allChecked;
          })
          this.calcTotal();
        },
        itemCheckedChange(){
          // 点击商品选中和取消选中
          // 重新计算总价格
          this.calcTotal();
          // 判断是否商品全部选中 全选变成true 否则 变成false
          this.allChecked = this.items.every(item=> item.checked);
        },
        reduceNum(index) {
          // 减少商品购买数量
          this.items[index].num--;
          if (this.items[index].num <= 1) {
            this.items[index].num = 1;
          }
          this.calcTotal();
        },
        addNum(index) {
          // 增加商品购买数量
          this.items[index].num++;
          this.calcTotal();
        },
        calcTotal() {
          /* 
          所有已经选中的商品的单价*数量总和
          */
          // 去除未选中的商品
          const checkItems = this.items.filter(item=>item.checked);
          // 计算总价格
          let total = 0;
          checkItems.forEach((item) => {
            total += item.price * item.num;
          })
          this.total = parseFloat(total.toFixed(2));
        }
      },
      mounted() {
        // 实例加载完成方法会自动触发
        this.calcTotal();
      }
    })
  </script>
</body>

</html>